import React, { useEffect, useState } from 'react';
import { Collapse, Container, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
import { Link } from 'react-router-dom';
import Add from './Add'
import './NavMenu.css';

export let NavMenu = props => {
  const [modal, setModal] = useState(false);
  const [login, setLogin] = useState(false);
  const [userid,setUserId] = useState('');
  const [userName, setUserName] = useState('');
  const [userIcon, setUserIcon] = useState('');
  const [text,setText] = useState('');
  useEffect(() => {
    window.setUser = (user) => {
      window.user=user;
      window.userid=user.id;
      setUserName(user.name);
      setUserIcon(user.icon);
      setLogin(true);
    };
    let isLogin = async () => {
      let resp = await fetch('/api/Index/hello');
      if (resp.ok) {
        let user = await resp.json();
        setUserName(user.name);
        setUserIcon(user.icon);
        setUserId(user.id);
        window.user=user;
        window.userid=user.id;
        setLogin(true);
      }
    }
    isLogin();
    return () => {

    };
  }, [])
  return (
    <header>
      <Navbar className="navbar-expand-sm navbar-toggleable-sm ng-white border-bottom box-shadow mb-3" light>
        <Container style={{ width: 956, margin: '0 auto',padding:0 }}>

          <Link className='logo' to="/">
          <img src='/img/logo.png' width={36} height={36} style={{marginRight:8}}></img>
            独角兽相册
            </Link>
          <div className='search'>
            <input className='input-search' value={text} onChange={e=>{setText(e.target.value)}}></input>
            <button className='btn-search' onClick={()=>{window.location.href=`/search/${text}`}}>
              <svg t="1569641407005" style={{ marginTop: -5, marginLeft: -5 }} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4572" width="20" height="20"><path d="M994.112 858.368L769.152 633.408C808.32 569.984 832 496 832 416 832 186.24 645.76 0 416 0S0 186.24 0 416 186.24 832 416 832c80 0 153.984-23.68 217.344-62.784l225.024 224.96a96.021333 96.021333 0 0 0 135.744-135.808zM416 704C256.96 704 128 575.04 128 416S256.96 128 416 128 704 256.96 704 416 575.04 704 416 704z" p-id="4573" fill="#ffffff"></path></svg>
            </button>
          </div>
          <div style={{ height: '100%' }}>
            <div className='add-btn' onClick={(e) => { if(login){setModal(!modal);}else{ window.location.href='/login';} }}><svg t="1569640001941" style={{ marginTop: -5 }} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1723" width="16" height="16"><path d="M832 576 576 576 576 832C576 867.328 547.328 896 512 896 476.608 896 448 867.328 448 832L448 576 192 576C156.608 576 128 547.328 128 512 128 476.672 156.608 448 192 448L448 448 448 192C448 156.672 476.608 128 512 128 547.328 128 576 156.672 576 192L576 448 832 448C867.328 448 896 476.672 896 512 896 547.328 867.328 576 832 576Z" p-id="1724" fill="#ffffff"></path></svg> 发布</div>

            {login ? <Link className='head-user' to={'/people/'+window.user.id}>
              <img className='head-img' src={'/img/'+userIcon}></img>
              <span className='user-name'>{userName}</span>
            </Link> : <Link to='/login' className='login-btn'>请登录/注册</Link>}
          </div>

        </Container>
      </Navbar>
      <Add modal={modal} toggle={(e) => { setModal(!modal) }} />

    </header>
  );
}
